<template>
  <div id="app">
    <Head>信息管理</Head>
    <div class="inv-top-menu-bar">
      <div class="top-menu">
        <div class="top-menu-list">
          <span
            class="t-btn"
            :class="params.audit == 1 ? 'active' : ''"
            @click="changeTab(1)"
          >
            发布中
          </span>
          <span
            class="t-btn"
            :class="params.audit == 0 ? 'active' : ''"
            @click="changeTab(0)"
          >
            审核中
          </span>
          <span
            class="t-btn"
            :class="params.audit == 2 ? 'active' : ''"
            @click="changeTab(2)"
          >
            已下线
          </span>
        </div>
      </div>
    </div>
    <div class="form_split_10"></div>
    <van-empty
      image="search"
      description="没有找到对应的数据"
      style="background-color:#fff"
      v-if="show_empty === true"
    />
    <van-list class="list"
        v-if="show_empty != true"
        v-model="loading"
        :finished="finished"
        :finished-text="finished_text"
        @load="onLoad"
        :immediate-check="false" >
        <div class="item" v-for="(item,index) in list" :key="index">
            <img class="istop" v-if="item.is_top==1" src="../../../assets/images/cityinfo/release/release_30.png"/>
            <div class="name">{{item.title}}</div>
            <div class="lookdiv">
                <div class="looknum">浏览次数{{item.view_times}}次</div>
                <div class="time">{{item.refreshtime}}</div>
                <div class="state" :class="params.audit==1?'verify':params.audit==0?'pass':'notpass'">
                    {{params.audit==1?"发布中":params.audit==0?"审核中":item.is_end==1?"已过期":item.is_public!=1?"已关闭":"未通过"}}
                </div>
            </div>
            <div class="notice_box" v-if="params.audit==2&&item.audit==2">
              <div class="reason"></div>
              原因：
              <van-notice-bar color="#ff4800" background="#fff4ec">浏览次数浏览次数浏览次数浏览次数浏览次数浏览次数浏览次数浏览次数浏览次数浏览次数浏览次数浏览次数浏览次数浏览次数浏览次数浏览次数浏览次数浏览次数</van-notice-bar>
            </div>
            <div class="statediv">
                <div class="btndiv">
                    <div class="refresh" v-if="params.audit==1" @click="refresh(item.id)">刷新</div>
                    <div class="modify" @click="update(item.id,item.type_id)">修改</div>
                    <div class="colse" v-if="params.audit==1" @click="colse(item.id)">关闭</div>
                    <div class="top" v-if="params.audit==1&&item.is_top!=1" @click="top(item.id,item.title)">置顶</div>
                    <div class="open" v-if="params.audit==2&&item.is_public!=1&&item.is_end!=1" @click="open(item.id)">开启</div>
                    <div class="delay" v-if="params.audit==2&&item.is_end==1" @click="delay(item.id,item.type_id)">延期</div>
                    <div class="delete" v-if="params.audit==2" @click="ondelete(item.id)">删除</div>
                </div>
            </div>
        </div>
    </van-list>
    <router-link class="btn_row" to="/cityinfo/selclass">发布信息</router-link>
    <van-popup v-model="showPayment" closeable position="bottom">
        <PopupPayment
            :amount="paymoney"
            @handlerSubmit="handlerSubmit"
        ></PopupPayment>
    </van-popup>
    <van-popup v-model="showPaymenttwo" closeable position="bottom">
        <PopupPaymenttwo
            :daylist="daylist"
            :dayid="dayid"
            :daymoney="daymoney"
            @handlerSubmit="handlerSubmittwo"
        ></PopupPaymenttwo>
    </van-popup>
    <PaySubmit ref="paySubmit" :payment="paymoth" success-url="/cityinfo/infopromanage"></PaySubmit>
  </div>
</template>

<script>
import http from '@/utils/http'
import api from '@/api'
import PaySubmit from '@/components/service/PaySubmit'
import PopupPayment from '@/components/service/PopupPayment'
import PopupPaymenttwo from '@/components/cityinfo/PopupPayment.vue'

export default {
  components: {
    PaySubmit,
    PopupPayment,
    PopupPaymenttwo
  },
  data () {
    return {
      loading: false,
      finished: false,
      finished_text: '',
      page: 1,
      pagesize: 15,
      show_empty: false,
      params: {
        audit: 1
      },
      list: [],
      id: '',
      paymoney: 0,
      paymoth: 'wxpay',
      showPayment: false,
      type_id: '',
      daylist: [],
      dayid: '',
      daymoney: 0,
      showPaymenttwo: false
    }
  },
  created () {
    this.fetchData(true)
  },
  methods: {
    onLoad () {
      this.page++
      this.fetchData(false)
    },
    changeTab (num) {
      this.params.audit = num
      this.fetchData(true)
    },
    // 刷新
    refresh (id) {
      this.id = id
      http.post(api.city_refresh, {
        id: id
      }).then(res => {
        if (parseInt(res.code) === 200) {
          if (!res.data.fee) {
            this.$notify(res.message)
            this.fetchData(true)
          } else {
            this.paymoney = res.data.fee
            this.showPayment = true
          }
        } else {
          this.$notify(res.message)
        }
      }).catch(() => {})
    },
    handlerSubmit (payment) {
      this.paymoth = payment
      this.$refs.paySubmit.handlerSubmit(api.city_order_pay, {
        id: this.id,
        order_type: 5,
        pay_type: this.paymoth,
        redirect_url: this.$store.state.config.mobile_domain + 'cityinfo/infopromanage'
      })
    },
    // 修改
    update (id, type_id) {
      this.$router.push({
        path: '/cityinfo/release',
        query: {
          id: id,
          classid: type_id
        }
      })
    },
    // 关闭
    colse (id) {
      var that = this
      that.$dialog
        .confirm({
          title: '系统提示',
          message: '确定要关闭吗?'
        })
        .then(() => {
          const param = {
            id: id
          }
          http
            .get(api.city_colse, param)
            .then(res => {
              if (parseInt(res.code) === 200) {
                this.$notify({ type: 'success', message: res.message })
                this.fetchData(true)
              } else {
                this.$notify(res.message)
              }
            }).catch(err => {
              console.log(err)
            })
        })
        .catch(() => {})
    },
    // 置顶
    top (id, name) {
      this.$router.push({
        path: '/cityinfo/promote',
        query: {
          id: id,
          name: name
        }
      })
    },
    // 开启
    open (id) {
      var that = this
      that.$dialog
        .confirm({
          title: '系统提示',
          message: '确定要开启吗?'
        })
        .then(() => {
          const param = {
            id: id
          }
          http
            .get(api.city_open, param)
            .then(res => {
              if (parseInt(res.code) === 200) {
                this.$notify({ type: 'success', message: res.message })
                this.fetchData(true)
              } else {
                this.$notify(res.message)
              }
            }).catch(err => {
              console.log(err)
            })
        })
        .catch(() => {})
    },
    // 延期
    delay (id, type_id) {
      this.id = id
      this.type_id = type_id
      http.get(api.city_daysetmeal, {type_id: this.type_id}).then(res => {
        if (res.code == 200) {
          this.daylist = res.data
          if (this.daylist.length > 0) {
            this.dayid = this.daylist[0].index + ''
            this.daymoney = this.daylist[0].fee
            this.showPaymenttwo = true
          } else {
            http.post(api.city_order_pay, {
              id: this.id,
              order_type: 1
            }).then(res => {
              this.$notify({ type: 'success', message: res.message })
              this.fetchData(true)
            })
          }
        }
      })
    },
    handlerSubmittwo (payment, dayid) {
      this.paymoth = payment
      this.$refs.paySubmit.handlerSubmit(api.city_order_pay, {
        id: this.id,
        order_type: 1,
        publish_index: dayid,
        pay_type: this.paymoth,
        redirect_url: this.$store.state.config.mobile_domain + 'cityinfo/infopromanage'
      })
    },
    // 删除
    ondelete (id) {
      var that = this
      that.$dialog
        .confirm({
          title: '系统提示',
          message: '确定要删除吗?'
        })
        .then(() => {
          const param = {
            id: id
          }
          http
            .get(api.city_delete, param)
            .then(res => {
              if (parseInt(res.code) === 200) {
                this.$notify({ type: 'success', message: res.message })
                this.fetchData(true)
              } else {
                this.$notify(res.message)
              }
            }).catch(err => {
              console.log(err)
            })
        })
        .catch(() => {})
    },
    fetchData (init) {
      this.show_empty = false
      let conditions = { ...this.params }
      if (init === true) {
        this.page = 1
        this.finished_text = ''
        this.finished = false
      }
      conditions.page = this.page
      conditions.pagesize = this.pagesize
      this.loading = true
      http
        .get(api.city_infomanage, conditions)
        .then((res) => {
          if (init === true) {
            this.list = [...res.data.list]
          } else {
            this.list = this.list.concat(res.data.list)
          }

          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (res.data.list.length < this.pagesize) {
            this.finished = true
            if (init === false) {
              this.finished_text = '没有更多了'
            } else if (res.data.list.length === 0) {
              this.show_empty = true
            }
          }
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.inv-top-menu-bar {
  background: #ffffff;
  .top-menu {
    overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .top-menu-list {
    white-space: nowrap;
    display: flex;
    .t-btn {
      position: relative;
      white-space: nowrap;
      display: inline-block;
      text-align: center;
      color: #666666;
      flex: 1;
      font-size: 15px;
      text-decoration: none;
      padding: 12.5px 0;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
      &::after {
        position: absolute;
        left: 50%;
        bottom: 3px;
        width: 16px;
        height: 3px;
        background-color: #1787fb;
        border-radius: 100%;
        transform: translate(-50%, 0);
      }
      &.active {
        color: #1787fb;
        &::after {
          content: " ";
        }
      }
    }
  }
}
.list{
    height: calc(100vh - 53px - 51px - 67px);
    background-color: #f6f6f6;
    overflow: auto;
    .item{
        background-color: #ffffff;
        margin-bottom: 10px;
        padding-top: 18px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 10px;
        position: relative;
        .istop{
            width: 36px;
            height: 39px;
            position: absolute;
            right: 0;
            top: 0;
        }
        .name{
            padding-right: 30px;
            line-height: 1;
            font-size: 15px;
            color: #333333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .lookdiv{
            margin-top: 15px;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f2f2f2;
            position: relative;
            display: flex;
            align-items: center;
            .looknum{
                background: url('../../../assets/images/cityinfo/release/release_31.png') 0 center no-repeat;
                background-size: 13px 10px;
                padding-left: 15px;
                font-size: 12px;
                color: #555555;
            }
            .time{
                margin-left: 17px;
                font-size: 12px;
                color: #555555;
            }
            .state{
                position: absolute;
                right: 0px;
                font-size: 11px;
                padding: 4px 7px;
                border-radius: 4px;
                &.verify{
                    background-color: #f4f9ff;
                    color: #1787fb;
                }
                &.pass{
                    background-color: #fffbf8;
                    color: #ff7200;
                }
                &.notpass{
                    background-color: #fff5f4;
                    color: #ff0e0d;
                }
            }
        }
        .notice_box{
          display: flex;
          height: 30px;
          font-size: 14px;
          background: #fff4ec;
          color: #ff4800;
          align-items: center;
          margin-bottom: 10px;
          .van-notice-bar{
            height: 100%;
            flex: 8;
            padding-left: 0;
          }
          .reason{
            flex: 1;
            height: 100%;
            border-radius: 4px;
            background: url('../../../assets/images/cityinfo/release/release_33.png') 10px center no-repeat #fff4ec;
            background-size: 15px 15px;
          }
        }
        .statediv{
            height: 25px;
            display: flex;
            padding-left: 8px;
            align-items: center;
            position: relative;
            .btndiv{
                display: flex;
                position: absolute;
                right: 0px;
                .refresh,.modify,.colse,.open,.delay,.delete{
                    padding: 4px 18px;
                    margin-left: 6px;
                    border-radius: 50px;
                    border: 1px solid #ececec;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 12px;
                    color: #555555;
                }
                .top{
                    padding: 4px 18px;
                    margin-left: 6px;
                    border-radius: 50px;
                    border: 1px solid #ff5c23;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 12px;
                    color: #ff5c23;
                }
            }
        }
    }
}
.list::-webkit-scrollbar{
    display: none;
}
.btn_row {
    position: fixed;
    left: 16px;
    bottom: 23px;
    border-radius: 30px;
    width: calc(100vw - 32px);
    height: 44px;
    background-color: #1989f9;
    color: #ffffff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
